import { VariableFC } from '@xenopomp/advanced-types';
import cn from 'classnames';

import Logo from '../../ui/Logo';
import Logout from '../../ui/Logout';
import UiContainer from '../UiContainer';

import styles from './Header.module.scss';
import type { HeaderProps } from './Header.props';

// Тип VariableFC принимает 3 дженерика (обобщения):
// 1. «A»  - HTML-тег, параметры которого нужно скопировать
// 2. «P»  - дополнительные параметры, которые нужно добавить в интерфейс
// 3. «Ex» - параметры оригинального тега/компонента, которые нужно исключить.
//           'children' | 'className' и т.д.
const Header: VariableFC<'header', HeaderProps, 'children'> = ({
  className,
  ...props
}) => {
  return (
    <header
      className={cn(styles.appHeader, className)}
      {...props}
    >
      <UiContainer
        as={'div'}
        className={cn('flex justify-between items-center')}
      >
        <Logo />

        <Logout />
      </UiContainer>
    </header>
  );
};

export default Header;
